@import "_common";

%btn{
    display: block;
    width: 100%;
    height: torem(50);
    line-height: torem(50);
    text-align: center;
    border-radius: 4px;
    font-size: torem(18);
}
%btnInline{
    display: inline-block;
    height: torem(34);
    line-height: torem(34);
    padding: 0 torem(20);
    background: none;
    border-radius: 4px;
}


/*btn*/
.btn {
    @extend %btn;
    background: $orange;
    color: $white;
    &:active{
        background: $orangeLight; 
    }
    &.disable{
        background: $gray;
    }
}
.btn-blue{
    @extend %btn;
    background: $blue;
    color: $white;
    &:active{
        background : $blueLight;
    }
    &.disable{
        background: $gray;
    }
}

/*btn-outline*/
.btn-outline{
    @extend %btn;
    background: none;
    border:1px solid $orange;
    color: $orange;
    &:focus{
       border:1px solid $orange; 
    }
    &:active{
        background:$orange;
        color: $white;
    }
    &.disable{
        border:1px solid $gray;
        background: none;
        color: $gray;
    }
}
.btn-outline-blue{
    @extend %btn;
    background: none;
    border:1px solid $blue;
    color: $blue;
    &:focus{
       border:1px solid $blue; 
    }
    &:active{
        background:$blue;
        color: $white;
    }
}


/*btn-inline*/
.btn-inline{
   @extend %btnInline;
   color: $orange;
   border:1px solid $orange;
    &:focus{
       border:1px solid $orange; 
    }
    &:active{
        background:$orange;
        color: $white;
    }
    &.disable{
        border:1px solid $gray;
        background: $gray;
        color: $white;
    }
}

.btn-inline-blue{
   @extend %btnInline;
   color: $blue;
   border:1px solid $blue;
    &:focus{
       border:1px solid $blue; 
    }
    &:active{
        background:$blue;
        color: $white;
    }
}